.#{$theme-name} {
  /** Layout */

  .app-wrapper {
    background-color: $theme-bg-color;
    color: $font-color;

    // 侧边栏
    .sidebar-container {
      .sidebar-logo-container {
        background-color: lighten($theme-bg-color, 2%) !important;
      }
      .el-menu {
        background-color: lighten($theme-bg-color, 4%) !important;
        .el-menu-item {
          background-color: lighten($theme-bg-color, 4%) !important;
          &.is-active,
          &:hover {
            background-color: lighten($theme-bg-color, 8%) !important;
            color: $active-font-color !important;
          }
        }
      }
      .el-sub-menu__title {
        background-color: lighten($theme-bg-color, 4%) !important;
      }
    }

    // 顶部导航栏
    .navigation-bar {
      background-color: $theme-bg-color;
      .right-menu {
        .svg-icon {
          color: $font-color;
        }
      }
    }

    // TagsView
    .tags-view-container {
      background-color: $theme-bg-color !important;
      border-bottom: 1px solid lighten($theme-bg-color, 10%) !important;
      .tags-view-item {
        background-color: $theme-bg-color !important;
        color: $font-color !important;
        border: 1px solid $border-color !important;
        &.active {
          background-color: $active-theme-bg-color !important;
          color: $active-font-color !important;
          border-color: $border-color !important;
        }
      }
      .contextmenu {
        // 右键菜单
        background-color: lighten($theme-bg-color, 8%);
        color: $font-color;
        li:hover {
          background-color: lighten($theme-bg-color, 16%);
          color: $active-font-color;
        }
      }
    }

    // 右侧设置面板
    .handle-button {
      background-color: lighten($theme-bg-color, 20%) !important;
    }
  }

  /** AppMain 主要写 View 页面的黑暗样式 */

  .app-main {
    // 指令权限页面 /permission/directive
    .permission-alert {
      background-color: lighten($theme-bg-color, 8%);
    }
  }

  /** Login 页面 */

  .login-container {
    background-color: $theme-bg-color;
    color: $font-color;
    .login-card {
      background-color: lighten($theme-bg-color, 4%) !important;
    }
  }

  /** Element-Plus */

  // 侧边栏的 item 的 popper
  .el-popper {
    border: none !important;
    .el-menu {
      background-color: lighten($theme-bg-color, 4%) !important;
      .el-menu-item {
        background-color: lighten($theme-bg-color, 4%) !important;
        &.is-active,
        &:hover {
          background-color: lighten($theme-bg-color, 8%) !important;
          color: $active-font-color !important;
        }
      }
      .el-sub-menu__title {
        background-color: lighten($theme-bg-color, 4%) !important;
      }
    }
  }
}
